<template>
  <div>
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 2 }">
      <a-card class="card" title="申请活动" :bordered="false">
        <a-form @submit="handleSubmit" :form="form" class="form">
          <a-row class="form-row" :gutter="16">
            <a-col :lg="5" :md="8" :sm="24">
              <a-form-item>
                <a-select
                  placeholder="请选择活动标题"
                  v-decorator="[ 'titleId', {rules: [{ required: true, message: '请选择活动标题'}]} ]"
                >
                  <a-select-option
                    v-for="(item, i) in groupTitle"
                    :key="i"
                    :value="item.id"
                  >{{ item.title }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="3" :md="8" :sm="24">
              <a-form-item>
                <a-date-picker
                  name="endTime"
                  @change="endTimeOnChange"
                  v-decorator="[ 'endTime', {rules: [{ required: true, message: '请选择日期'}]} ]"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="2" :md="8" :sm="24">
              <a-form-item>
                <a-input v-decorator="[ 'serviceRateMin']" placeholder="服务费率" suffix="%" />
              </a-form-item>
            </a-col>
            <a-col :lg="2" :md="8" :sm="24">
              <a-form-item>
                <a-input v-decorator="[ 'estimateSales']" placeholder="最低销量" />
              </a-form-item>
            </a-col>
            <a-col :lg="3" :md="8" :sm="24">
              <a-form-item>
                <a-select
                  placeholder="请选中发布账号"
                  v-decorator="[ 'approver', {rules: [{ required: true, message: '请选中发布账号'}]} ]"
                >
                  <a-select-option
                    v-for="(item, i) in jdUser"
                    :key="i"
                    :value="item.id"
                  >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="2" :md="8" :sm="24">
              <a-form-item>
                <a-button htmlType="submit" type="primary">申请活动</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </a-skeleton>
    <br>
    <a-card class="card" title="活动列表" :bordered="false">
      <div slot="extra">
        <a-select
          style="width:200px"
          @change="getGroupList()"
          v-model="jdUserId"
        >
          <a-select-option
            v-for="(item, i) in jdUser"
            :key="i"
            :value="item.id"
          >{{ item.name }}</a-select-option>
        </a-select>
      </div>
      <a-table
        :columns="columns"
        :rowKey="groupList => groupList.activityId"
        :dataSource="groupList"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="activityStatus" slot-scope="activityStatus">
          <a-tag
            :color="activityStatus == 2 ?'green':'volcano'">
            {{ activityStatus===2?'进行中':(activityStatus===5?'已结束':'不可用') }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="activityId">
          <a @click="copyText(activityId.activityId)">复制报名链接</a>
        </span>

        <span slot="time" slot-scope="time">
          <span>起：{{ time.startTime }}<br>止：{{ time.endTime }}</span>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getGroupInfo, getGroupList, applyGroup } from '@/api/group'
const columns = [
  {
    title: '活动ID',
    dataIndex: 'activityId'
  },
  {
    title: '活动标题',
    dataIndex: 'title'
  },
  {
    title: '活动状态',
    dataIndex: 'activityStatus',
    scopedSlots: { customRender: 'activityStatus' }
  },
  {
    title: '活动时间',
    dataIndex: '',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '实时报名商品数',
    dataIndex: 'skuCnt'
  },
  {
    title: '引入订单数',
    dataIndex: 'orderCntIn'
  },
  {
    title: '预估服务费',
    dataIndex: 'ygServiceFee'
  },
  {
    title: '实际服务费',
    dataIndex: 'serviceFee'
  },
  {
    title: '操作',
    dataIndex: '',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'NewGroup',
  data () {
    return {
      description: '活动申请，此处所有的活动供全站所有人员使用。',
      value: 1,
      groupTitle: [],
      jdUser: [],
      // form
      form: this.$form.createForm(this),
      endTime: '',
      columns,
      groupList: [],
      pagination: {
        current: 1,
        pageSize: 15,
        page: 1,
        total: 0
      },
      loading: false,
      skeLoading: true,
      jdUserId: 1
    }
  },
  created () {
    getGroupInfo({})
      .then(res => {
        this.skeLoading = false
        this.groupTitle = res.result.title
        this.jdUser = res.result.user
        this.jdUserId = res.result.user[0].id
        this.getGroupList(20, 1)
      })
      .catch(() => {
        this.skeLoading = false
        console.log('null')
      })
  },
  methods: {
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          values.endTime = this.endTime
          this.applyGroup(values)
        }
      })
    },
    endTimeOnChange (date, dateString) {
      this.endTime = dateString
    },
    handleTableChange (pagination, filters, sorter) {
      // console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.getGroupList(pagination.pageSize, pagination.current)
    },
    getGroupList (pageSize, page) {
      this.loading = true
      getGroupList({ pageSize: pageSize, page: page, jdUserId: this.jdUserId })
        .then(res => {
          this.groupList = res.result.data
          if (this.groupList.length > 0) {
            const pagination = { ...this.pagination }
            pagination.total = parseInt(res.result.total)
            pagination.pageSize = 20
            this.loading = false
            this.pagination = pagination
          }
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    },
    copyText (actId) {
      this.$copyText('https://jtk-jzt.jd.com/jtk/#/orient-act-info?id=' + actId + '_7').then(message => {
        // console.log('copy', message)
        this.$message.success('复制成功')
      }).catch(err => {
        console.log('copy.err', err)
        this.$message.error('复制失败')
      })
    },
    applyGroup (parameter) {
      applyGroup(parameter)
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.getGroupList(10, 1)
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('服务器或者网络出错')
        })
    }

  }
}
</script>
